<template>
  <view class="room_bar">
    <chat-suit-emoji ref="chat_suit_emoji" @newEmojiStr="emojiAction"></chat-suit-emoji>
    <chat-suit-main ref="chat_suit_main" :username="username" :chatType="chatType" @inputFocused="cancelEmoji"></chat-suit-main>
    <chat-suit-image ref="chat_suit_image" :username="username" :chatType="chatType"></chat-suit-image>
    <chat-suit-location ref="chat_suit_location" :username="username"></chat-suit-location>
    <chat-suit-video ref="chat_suit_video" :username="username"></chat-suit-video>
    <chat-suit-ptopcall ref="chat_suit_ptopcall" :chatType="chatType" @makeAudioCall="onMakeAudioCall" @makeVideoCall="onMakeVideoCall"></chat-suit-ptopcall>

    <view :class="'other_func ' + (isIPX ? 'other_func_X' : '')">
      <view class="open_emoji" bind:tap="openEmoji"><image src="/static/images/Emoji.png" /></view>
      <view class="v-record" @tap="toggleRecordModal">
        <image
          class="icon-record"
          :src="recordStatus != RecordStatus.HIDE ? '/static/images/iconAudioActive@2x.png' : '/static/images/voice.png'"
          style="width:16px; height: 24px"
        ></image>
      </view>
      <view class="open_camera" @tap="openCamera"><image src="/static/images/camora.png" style="width:24px; height: 18px"></image></view>
      <view class="send_image" @tap="sendImage"><image src="/static/images/pic.png" style="height:22px; width: 22px"></image></view>
      <view class="send_image" bind:tap="sendLocation"><image src="/static/images/iconLocation@2x.png" style="height:18px;" /></view>
      <view class="v-record" @tap="callVideo" v-if="username.groupId"><image src="/static/images/call2x.png" style="height:24px; width: 15px"></image></view>
    </view>
  </view>
</template>

<script>
let RecordStatus = require('./suit/audio/record_status').RecordStatus;
let msgType = require('../msgtype');
import chatSuitEmoji from './suit/emoji/emoji';
import chatSuitImage from './suit/image/image';
import chatSuitLocation from './suit/location/location';
import chatSuitMain from './suit/main/main';
import chatSuitVideo from './suit/video/video';
import chatSuitPtopcall from './suit/ptopcall/ptopcall';

export default {
  data() {
    return {
      recordStatus: RecordStatus.HIDE,
      RecordStatus,
      isIPX: ''
    };
  },

  components: {
    chatSuitEmoji,
    chatSuitImage,
    chatSuitLocation,
    chatSuitMain,
    chatSuitVideo,
    chatSuitPtopcall
  },
  props: {
    username: {
      type: Object,
      default: () => ({})
    },
    chatType: {
      type: String,
      default: msgType.chatType.SINGLE_CHAT
    }
  },

  // lifetimes
  created() {},

  beforeMount() {},

  moved() {},

  destroyed() {},

  onLoad() {
    this.setData({
      isIPX: getApp().globalData.isIPX
    });
    console.log(this.isIPX);
  },

  methods: {
    // 事件有长度限制：仅限 26 字符
    toggleRecordModal() {
      this.$emit(
        'tapSendAudio',
        {
          detail: null
        },
        {
          bubbles: true,
          composed: true
        }
      );
    },

    onMakeVideoCall() {
      this.$emit('makeVideoCall', {
        detail: 'single'
      });
    },

    onMakeAudioCall() {
      this.$emit('makeAudioCall', {
        detail: 'single'
      });
    },

    sendVideo() {
      this.$refs.chat_suit_video.sendVideo();
    },
    openCamera() {
      this.$refs.chat_suit_image.openCamera();
    },

    openEmoji() {
      this.$refs.chat_suit_emoji.openEmoji();
    },

    cancelEmoji() {
      this.$refs.chat_suit_emoji.cancelEmoji();
    },

    sendImage() {
      this.$refs.chat_suit_image.sendImage();
    },

    sendLocation() {
      this.$refs.chat_suit_location.sendLocation();
    },

    emojiAction(evt) {
      this.$refs.chat_suit_main.emojiAction(evt.detail.msg);
    },

    callVideo() {
      console.log('this.data.__comps__.ptopcall', this.$refs.chat_suit_ptopcall);

      this.$refs.chat_suit_ptopcall.show();
    }
  }
};
</script>
<style>
@import './inputbar.css';
</style>
